<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="css/merchantList.css" type="text/css"/>

</head>
<body>
<!--食物展示模板-->
<div id="merchant-model" class="show-merchant-list-sample hidden-merchant-pattern">
    <div class="thumbnail">
        <div id="merchant-img-div" class="thumbnail">
            <img class="merchant-image" src="adv1.jpg">
        </div>
        <div class="caption merchant-info-div">
            <h3>222</h3>
            <p>Merchant Address</p>
            <a href="javascript:void(0);" class="btn btn-primary btn-lg show-merchant-detail" role="button">Detail</a>
        </div>
    </div>
</div>
<div id="main-div">
    <!-- 上方标题-->
    <div class="top-title">
        <div class="dole-logo log-div">
            <a href="">
                <img src="img/login.jpg" alt="Angers">
            </a>
        </div>
        <div class="title-nav">
            <div class="page-header page-header-div">
                <h1>商家列表页面</h1>
            </div>
            <div class="admin-center">

                <img src="http://ZHA-ITA077-w7/${customer.avatar}" alt="..." class="img-rounded" height="70" width="70">
                <!-- Split button -->
                <div class="btn-group user-center-btn-group">
                    <button type="button" class="btn btn-primary btn-lg">UserName</button>
                    <button type="button" class="btn btn-primary btn-lg dropdown-toggle  " data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">UserCenter</a></li>
                        <li><a href="#">AddressManager</a></li>
                        <li><a href="#">Change Avater</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Log Out</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 菜单栏-->
    <div class="bottom-menu-operationarea">

        <div id="left-menu-log" class="mac-main-nav menu-div">
            <!--选项栏-->
            <div class="console-menu">
                <ul class="nav nav-pills nav-stacked">
                    <li crole="presentation" class="menu-li active"><a href="merchantList.jsp">HomePage</a></li>
                    <li role="presentation" class="menu-li"><a href="orderList.jsp">Orger Page</a></li>
                </ul>
            </div>
        </div>
        <div class="operationarea">
            <!-- 广告 -->
            <div id="advertisement_container" style="margin:0 auto">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>

                    <div class="carousel-inner" role="listbox" id="myCarousel">

                    </div>

                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
            <div id="merchant-type-choose-nav">
                <ul id="category-list" class="nav nav-pills">
                </ul>

            </div>
            <div id="show-merchant-area">
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/merchantDisplay.js"></script>
<script type="text/javascript">
    /*页面初始化*/
    $(function () {
        var mainPage = new merchantDisplay($("#category-list"),
                $("#show-merchant-area"));
        mainPage.findAllCategories();
        mainPage.findMerchants("all");
        mainPage.findAdvertisement();

        var ws = new WebSocket("ws://10.222.29.154:8080/client-version3/ws/client");
        ws.onmessage = function (event) {
            console.log(event);
            if (event.data == "change") {
                mainPage.findMerchants("all");
            }
        };
    });
</script>
</body>
</html>